import * as Vue from "vue";
import { Script } from "@/plugins/xl-setup-plugins";
import usePosition from "@/mixins/usePosition";
import useMixin from "@/mixins/useMixin";
import { HelloWorldProps, HelloWorldSetupContext } from "./index";

export default Script(function (
  props: HelloWorldProps,
  ctx: HelloWorldSetupContext
) {
  // 定位相关
  const position = usePosition();

  const text = Vue.ref("");

  function handleInput(event: Event) {
    const e = event as InputEvent;
    console.log(e, (e.target as HTMLInputElement).value);
  }

  Vue.watch(text, function (newVal) {
    ctx.emit("handleInput", newVal);
  });

  useMixin(text);

  function handleInputClear() {
    text.value = "";
  }

  // 暴露给其它组件使用
  ctx.expose({
    handleInputClear,
  });

  // 给渲染使用
  return {
    props,
    ctx,
    position,
    text,
    handleInput,
  };
});
